<template>
  <div class="doc-container">
    <!-- 顶部导航 -->
    <div class="doc-nav">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>API文档</el-breadcrumb-item>
        <el-breadcrumb-item>WebSocket实时通信</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="doc-content">
      <!-- 左侧目录 -->
      <div class="doc-sidebar">
        <div class="sidebar-header">
          <h3>WebSocket文档</h3>
        </div>
        <el-menu 
          :default-active="activeMenu"
          @select="handleMenuSelect"
        >
          <el-menu-item index="introduction">
            <i class="el-icon-connection"></i>
            <span>简介</span>
          </el-menu-item>
          <el-menu-item index="architecture">
            <i class="el-icon-share"></i>
            <span>架构设计</span>
          </el-menu-item>
          <el-menu-item index="connection">
            <i class="el-icon-link"></i>
            <span>连接管理</span>
          </el-menu-item>
          <el-menu-item index="message-format">
            <i class="el-icon-message"></i>
            <span>消息格式</span>
          </el-menu-item>
          <el-menu-item index="heartbeat">
            <i class="el-icon-timer"></i>
            <span>心跳机制</span>
          </el-menu-item>
          <el-menu-item index="error-handling">
            <i class="el-icon-warning"></i>
            <span>错误处理</span>
          </el-menu-item>
          <el-menu-item index="examples">
            <i class="el-icon-notebook-2"></i>
            <span>示例代码</span>
          </el-menu-item>
          <el-menu-item index="best-practices">
            <i class="el-icon-trophy"></i>
            <span>最佳实践</span>
          </el-menu-item>
        </el-menu>
      </div>

      <!-- 右侧内容 -->
      <div class="doc-main">
        <!-- 简介部分 -->
        <div class="content-section" id="introduction">
          <h1>WebSocket实时通信</h1>
          <div class="version-badge">
            <el-tag type="success">协议版本: v1.2</el-tag>
            <el-tag type="info">更新日期: 2024-03-20</el-tag>
          </div>

          <div class="section-content">
            <p class="intro-text">
              WebSocket提供了浏览器和服务器之间的全双工、低延迟通信通道。我们的WebSocket服务支持实时数据推送、在线状态同步、即时消息等场景。
            </p>

            <el-card class="feature-grid">
              <div class="feature-item">
                <i class="el-icon-timer"></i>
                <h4>毫秒级延迟</h4>
                <p>超低延迟的数据传输</p>
              </div>
              <div class="feature-item">
                <i class="el-icon-refresh"></i>
                <h4>双向通信</h4>
                <p>全双工数据交换</p>
              </div>
              <div class="feature-item">
                <i class="el-icon-connection"></i>
                <h4>保持连接</h4>
                <p>长连接自动重连</p>
              </div>
              <div class="feature-item">
                <i class="el-icon-finished"></i>
                <h4>可靠传输</h4>
                <p>消息可靠性保证</p>
              </div>
            </el-card>
          </div>
        </div>

        <!-- 架构设计部分 -->
        <div class="content-section" id="architecture">
          <h2>架构设计</h2>
          <div class="section-content">
            <div class="architecture-diagram">
              <el-image 
                :src="architectureImage" 
                fit="contain"
                :preview-src-list="[architectureImage]"
              >
                <div slot="placeholder" class="image-slot">
                  加载中<span class="dot">...</span>
                </div>
              </el-image>
            </div>
            
            <div class="architecture-features">
              <el-collapse v-model="activeFeatures">
                <el-collapse-item title="集群部署" name="1">
                  <div class="feature-detail">
                    <i class="el-icon-s-grid"></i>
                    <div class="feature-text">
                      <h4>分布式集群</h4>
                      <p>支持水平扩展，自动负载均衡</p>
                    </div>
                  </div>
                </el-collapse-item>
                <el-collapse-item title="消息队列" name="2">
                  <div class="feature-detail">
                    <i class="el-icon-s-promotion"></i>
                    <div class="feature-text">
                      <h4>消息持久化</h4>
                      <p>保证消息可靠投递，支持离线消息</p>
                    </div>
                  </div>
                </el-collapse-item>
                <el-collapse-item title="实时监控" name="3">
                  <div class="feature-detail">
                    <i class="el-icon-data-analysis"></i>
                    <div class="feature-text">
                      <h4>性能监控</h4>
                      <p>实时监控连接状态和系统性能</p>
                    </div>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>
          </div>
        </div>

        <!-- 连接管理部分 -->
        <div class="content-section" id="connection">
          <h2>连接管理</h2>
          <div class="section-content">
            <h3>建立连接</h3>
            <div class="code-block">
              <pre><code>const ws = new WebSocket('wss://api.example.com/ws?token=YOUR_TOKEN');

ws.onopen = () => {
  console.log('连接已建立');
  // 发送认证消息
  ws.send(JSON.stringify({
    type: 'auth',
    data: { token: 'YOUR_TOKEN' }
  }));
};</code></pre>
              <el-button 
                size="small" 
                type="primary" 
                class="copy-btn"
                @click="copyCode('connection-code')"
              >
                复制
              </el-button>
            </div>

            <el-alert
              title="安全提示"
              type="warning"
              description="生产环境必须使用WSS(WebSocket Secure)协议，确保数据传输安全。"
              show-icon
              :closable="false"
              class="security-alert"
            />

            <h3>连接状态</h3>
            <el-table :data="connectionStates" style="width: 100%">
              <el-table-column prop="state" label="状态" width="180"/>
              <el-table-column prop="description" label="说明"/>
            </el-table>
          </div>
        </div>

        <!-- 消息格式部分 -->
        <div class="content-section" id="message-format">
          <h2>消息格式</h2>
          <div class="section-content">
            <p>所有WebSocket消息使用JSON格式，包含以下字段：</p>
            
            <el-card class="message-format">
              <pre><code>{
  "type": "message_type",    // 消息类型
  "data": {                  // 消息数据
    // 具体业务数据
  },
  "timestamp": 1679305200000 // 时间戳
}</code></pre>
            </el-card>

            <h3>消息类型</h3>
            <el-table :data="messageTypes" style="width: 100%">
              <el-table-column prop="type" label="类型" width="180"/>
              <el-table-column prop="description" label="说明"/>
              <el-table-column prop="example" label="示例"/>
            </el-table>
          </div>
        </div>

        <!-- 其他部分... -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'WebSocketDoc',
  data() {
    return {
      activeMenu: 'introduction',
      activeFeatures: ['1'],
      architectureImage: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*NNs6TKOR3isAAAAAAAAAAAAADmJ7AQ/original',
      connectionStates: [
        {
          state: 'CONNECTING',
          description: '连接正在建立'
        },
        {
          state: 'OPEN',
          description: '连接已建立，可以通信'
        },
        {
          state: 'CLOSING',
          description: '连接正在关闭'
        },
        {
          state: 'CLOSED',
          description: '连接已关闭或无法建立'
        }
      ],
      messageTypes: [
        {
          type: 'auth',
          description: '认证消息',
          example: '{"type":"auth","data":{"token":"..."}}'
        },
        {
          type: 'ping',
          description: '心跳消息',
          example: '{"type":"ping","timestamp":1679305200000}'
        },
        {
          type: 'message',
          description: '业务消息',
          example: '{"type":"message","data":{"content":"..."}}'
        }
      ]
    }
  },
  methods: {
    handleMenuSelect(index) {
      this.activeMenu = index;
      const element = document.getElementById(index);
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
      }
    },
    copyCode(code) {
      navigator.clipboard.writeText(code).then(() => {
        this.$message.success('复制成功');
      }).catch(() => {
        this.$message.error('复制失败');
      });
    }
  }
}
</script>

<style scoped>
.doc-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  min-height: 100vh;
}

.doc-nav {
  margin-bottom: 20px;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.doc-content {
  display: flex;
  gap: 30px;
}

.doc-sidebar {
  width: 260px;
  position: sticky;
  top: 20px;
  height: calc(100vh - 100px);
  overflow-y: auto;
  border-right: 1px solid #eee;
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.doc-main {
  flex: 1;
  max-width: 800px;
}

.content-section {
  margin-bottom: 60px;
}

.version-badge {
  margin: 20px 0;
  display: flex;
  gap: 10px;
}

.intro-text {
  font-size: 1.1em;
  line-height: 1.6;
  color: #2c3e50;
  margin: 20px 0;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px;
  margin: 20px 0;
}

.feature-item {
  text-align: center;
  padding: 20px;
}

.feature-item i {
  font-size: 2.5em;
  color: #409EFF;
  margin-bottom: 15px;
}

.feature-item h4 {
  margin: 10px 0;
  color: #2c3e50;
}

.feature-item p {
  color: #666;
  font-size: 0.9em;
}

.code-block {
  background: #f8f9fa;
  border-radius: 6px;
  padding: 15px;
  margin: 15px 0;
  position: relative;
}

.code-block pre {
  margin: 0;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
}

.copy-btn {
  position: absolute;
  right: 10px;
  top: 10px;
}

.architecture-diagram {
  margin: 30px 0;
  text-align: center;
}

.architecture-diagram img {
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.feature-detail {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px;
}

.feature-detail i {
  font-size: 24px;
  color: #409EFF;
}

.security-alert {
  margin: 20px 0;
}

.message-format {
  margin: 20px 0;
  background: #f8f9fa;
}

.message-format pre {
  margin: 0;
  padding: 15px;
}

.architecture-features {
  margin: 30px 0;
}

h1 {
  font-size: 2.5em;
  color: #2c3e50;
  margin-bottom: 20px;
}

h2 {
  font-size: 2em;
  color: #2c3e50;
  margin: 30px 0 20px;
}

h3 {
  font-size: 1.5em;
  color: #2c3e50;
  margin: 25px 0 15px;
}

@media (max-width: 768px) {
  .doc-content {
    flex-direction: column;
  }

  .doc-sidebar {
    width: 100%;
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .architecture-diagram img {
    width: 100%;
  }
}
</style>
